<template>
  <div>
    <el-dialog
      title="添加员工"
      @close="cancel"
      :visible.sync="dialogVisible"
      width="50%">
      <el-steps :active.sync="active" :key="active">
        <el-step title="步骤 1" description="需要输入手机号进行数据检索是否已经有注册账号">
        </el-step>
        <el-step title="步骤 2" description="员工信息填写雨录入">
        </el-step>
      </el-steps>
      <div v-if="active===0">
        <el-form>
          <el-form-item>
            <div v-loading="loading">
              <el-input v-model="phone" @blur="phoneBlur" prefix-icon="el-icon-mobile-phone"
                        placeholder="请输入完整的手机号"></el-input>
            </div>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" lazy :data="userList" row-key="id"
                  @selection-change="handleSelectionChange" v-if="userList.length!=0">
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="用户编号" align="center" key="userId" prop="userId"/>
          <el-table-column label="用户名称" align="center" key="userName" prop="userName"
                           :show-overflow-tooltip="true"/>
          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName"
                           :show-overflow-tooltip="true"/>
          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120"/>
          <el-table-column label="创建时间" align="center" prop="createTime" width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="active===1">
        <el-form v-if="!multiple" label-position="right" label-width="100px">
          <el-form-item label="所属门店"　prop="deptId">
            <el-select placeholder="请选择员工所属门店信息" v-model="form.deptId">
              <el-option v-for="item in storesOption" :label="item.name"
                         :value="item.deptId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色">
            <el-select placeholder="请选择员工身份" multiple v-model="form.roleIds">
              <el-option
                v-for="item in roleOption"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
                :disabled="item.status == 1"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form v-else ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户昵称" prop="nickName">
                <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属门店" prop="deptId">
                <el-select placeholder="请选择员工所属门店信息" v-model="form.deptId">
                  <el-option v-for="item in storesOption" :label="item.name"
                             :value="item.deptId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色" prop="role">
                <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
                  <el-option
                    v-for="item in roleOption"
                    :key="item.roleId"
                    :label="item.roleName"
                    :value="item.roleId"
                    :disabled="item.status == 1"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
                <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20"
                          show-password/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户性别">
                <el-select v-model="form.sex" placeholder="请选择性别">
                  <el-option
                    v-for="dict in dict.type.sys_user_sex"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-radio-group v-model="form.status">
                  <el-radio
                    v-for="dict in dict.type.sys_normal_disable"
                    :key="dict.value"
                    :label="dict.value"
                  >{{ dict.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                <text v-if="!isDisable&&userList.length===0">该用户为新用户</text>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="isDisable" v-if="active==0" @click="nextStep">下一步</el-button>
        <el-button v-else @click="lastStep">上一步</el-button>
        <el-button type="primary" @click="submitForm" v-if="active==1">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import {addUser, listUsers, updateUser} from "@/api/system/user";
import {getPlatformRoles} from "@/api/system/role";
import {storesRoleList} from "@/api/merchant/stores";
import {Message} from "element-ui";

export default {
  name: 'addStaff',
  components: {Treeselect},
  props: ['dict'],
  data() {
    return {
      rules: {
        role: [
          { required: true, message: "角色不能为空", trigger: "blur" }
        ],
        userName: [
          {required: true, message: "用户名称不能为空", trigger: "blur"},
          {min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur'}
        ],
        nickName: [
          {required: true, message: "用户昵称不能为空", trigger: "blur"}
        ],
      },
      form: {},
      active: 0,
      isDisable: true,
      multiple: true,
      storesOption: [
        {
        text: '金泰广场店',
        value: '1'
        }, {
          text: '锦泰广场店',
          value: '2'
        }, {
          text: '星沙店',
          value: '3'
        }],
      roleOption: [
        {
        text: '店长',
        value: '1'
      },
        {
          text: '业务员',
          value: '2'
        }, {
          text: '司机',
          value: '3'
        }
      ],
      phone: '',
      dialogVisible: false,
      loading: false,
      userList: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 提交员工表单数据
    submitForm() {
      console.log(this.form.userId)
      if (this.form.userId != undefined) {
        // 修改角色和身份
        updateUser(this.form).then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess("员工录入成功");
            this.dialogVisible = false
          }
        })
      } else {
        // 添加员工功能（并且录入对应的门店与角色身份）
        this.form.phonenumber = this.phone
        addUser(this.form).then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess("员工录入成功");
            this.dialogVisible = false
          }
        })
      }
    },
    init() {
      getPlatformRoles().then(res => {
        if (res.code == 200) {
          this.roleOption = res.data
        }
      })
      storesRoleList({
        pageNum: 1,
        pageSize: 100,
      }).then(res => {
        if (res.code == 200) {
          this.storesOption = res.rows
        }
      })

    },
    nextStep() {
      if (this.multiple) {
        this.form = {
          nickName: null,
          deptId: null,
          roleIds: [],
          email: null,
          userName: null,
          password: null
        }
      }
      this.$nextTick(() => {
        this.active = this.active + 1
        console.log('this.form', this.form)
      })
    },
    lastStep() {
      this.$nextTick(() => {
        this.active = this.active - 1
      })
    },
    phoneBlur() {
      if (this.phone.length == 11) {
        this.$nextTick(() => {
          this.loading = true
        })
        listUsers({phonenumber: this.phone}).then(res => {
          if (res.code === 200) {
            if (res.total > 0) {
              for (let i = 0; i < res.rows[0].roles.length; i++) {
                console.log(res.rows[0].roles[i])
                if (res.rows[0].roles[i].roleKey == 'common') {
                  this.userList = res.rows
                  break
                }
              }
              if (this.userList.length == 0) {
                Message.warning("当前用户已有所属商户")
              }
            } else {
              this.isDisable = false
            }
          }
          this.loading = false
        }).catch(res => {
          this.loading = false
        })
        return
      }
      this.isDisable = true
    },
    cancel() {
      this.dialogVisible = false
    },
    handleSelectionChange(selection) {
      this.multiple = !selection.length;
      if (!this.multiple) {
        this.form = selection[0]
        this.form.deptId = null
        console.log('this.form', this.form)
      }
      this.isDisable = this.multiple


    },
    open() {
      this.form = {}
      this.active = 0
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped lang="scss">
</style>
